<template>
  <div
    v-loading="processFlg || deviceFlg || clampFlg || personnelFlg"
    element-loading-text="数据加载中..."
  >
    <el-form ref="form" :model="form" label-width="120px" style="display: flex">
      <el-form-item label="产线模板名称">
        <span>{{ form.lineName }}</span>
      </el-form-item>
      <el-form-item label="产线类型">
        <span>{{ lineTypeName }}</span>
      </el-form-item>
      <el-form-item label="产品分类">
        <span>{{ form.productCategory }}</span>
      </el-form-item>
      <el-form-item label="线平衡率">
        <span>{{ form.lineIndicator }}</span>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border height="620" width="100%">
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column label="工位" prop="workPositionName"></el-table-column>
      <el-table-column label="工序名称">
        <template slot-scope="scope">
          <div
            v-for="(item, i) in scope.row.workPositionDataList"
            :key="i"
            style="margin-bottom: 10px"
          >

            <div>{{ item.processName }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="设备类型">
        <template slot-scope="scope">
          <div
            v-for="(item, i) in scope.row.workPositionDataList"
            :key="i"
            style="margin-bottom: 10px"
          >
<!--            <el-select
              v-model="item.deviceTypeArray"
              placeholder="请选择"
              @focus="scope.row.deviceShowOption = true"
              @blur="scope.row.deviceShowOption = false"
              multiple
              filterable
              clearable
              disabled
            >
              <el-option
                v-for="(item, index) in deviceList"
                :key="index"
                :label="`${item.deviceName} `"
                :value="item.deviceName"
              ></el-option>
            </el-select>-->
            <elSelectTpl :list="deviceList" :isDisabled="true" v-model="item.deviceTypeArray" :selectedValues="item.deviceTypeArray" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="设备数量">
        <template slot-scope="scope">
          <div
            v-for="(item, i) in scope.row.workPositionDataList"
            :key="i"
            style="margin-bottom: 10px"
          >
            <el-input v-model="item.deviceNum" disabled />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="工具类型">
        <template slot-scope="scope">
          <div
            v-for="(item, i) in scope.row.workPositionDataList"
            :key="i"
            style="margin-bottom: 10px"
          >
<!--            <el-select
              v-model="item.toolTypeArray"
              placeholder="请选择"
              @focus="scope.row.deviceShowOption = true"
              @blur="scope.row.deviceShowOption = false"
              multiple
              filterable
              clearable
              disabled
            >
              <el-option
                v-for="(item, index) in toolList"
                :key="index"
                :label="`${item.deviceName} `"
                :value="item.deviceName"
              ></el-option>
            </el-select>-->
            <elSelectTpl :list="toolList" :isDisabled="true" v-model="item.toolTypeArray" :selectedValues="item.toolTypeArray" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="工具数量">
        <template slot-scope="scope">
          <div
            v-for="(item, i) in scope.row.workPositionDataList"
            :key="i"
            style="margin-bottom: 10px"
          >
            <el-input v-model="item.toolNum" disabled />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="夹具类型">
        <template slot-scope="scope">
          <div
            v-for="(item, i) in scope.row.workPositionDataList"
            :key="i"
            style="margin-bottom: 10px"
          >
<!--            <el-select
              v-model="item.clampTypeArray"
              placeholder="请选择"
              @focus="scope.row.deviceShowOption = true"
              @blur="scope.row.deviceShowOption = false"
              multiple
              filterable
              clearable
              disabled
            >
              <el-option
                v-for="(item, index) in clampList"
                :key="index"
                :label="`${item.deviceName} `"
                :value="item.deviceName"
              ></el-option>
            </el-select>-->
            <elSelectTpl :list="clampList" :isDisabled="true" v-model="item.clampTypeArray" :selectedValues="item.clampTypeArray" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="夹具数量">
        <template slot-scope="scope">
          <div
            v-for="(item, i) in scope.row.workPositionDataList"
            :key="i"
            style="margin-bottom: 10px"
          >
            <el-input v-model="item.clampNum" disabled />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="资质等级" min-width="100">
        <template slot-scope="scope">
          <div
            v-for="(item, i) in scope.row.workPositionDataList"
            :key="i"
            style="margin-bottom: 10px"
          >
            <el-select
              v-model="item.personGradesArray"
              placeholder="请选择"
              @focus="scope.row.deviceShowOption = true"
              @blur="scope.row.deviceShowOption = false"
              multiple
              filterable
              disabled
              clearable
            >
              <el-option
                v-for="(item, index) in person_grades"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="人员数量">
        <template slot-scope="scope">
          <div
            v-for="(item, i) in scope.row.workPositionDataList"
            :key="i"
            style="margin-bottom: 10px"
          >
            <el-input v-model="item.personNum" disabled />
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getObj } from "@/api/pfoc/factorysettings"; //获取当前工厂信息
import { getDevice, getLineType } from "@/api/hengdong/pfocinterface"; //获取设备相关
import { getWorkshopList } from "@/api/pfoc/workshop"; //获取全部车间
import { getPersonCredentialList } from "@/api/workorder/personcredentialmanage"; //获取人员列表
import { getCategory } from "@/api/workorder/hdviewapiitem"; //获取品类
import { getPfocProcessList } from "@/api/pfoc/pfocprocess"; //获取工序名称
import { getById } from "@/api/pfoc/realityproductlinemain";
import { getAllObj } from "@/api/pfoc/realityproducelinemodeling";
import elSelectTpl from "@/components/select/el-select-linemodeling-tpl.vue"

export default {
  components: { elSelectTpl },
  props: {
    lineId: {
      //产线ID
      type: String,
    },
  },
  data() {
    return {
      form: {
        lineName: "",
        productCategory: "",
        lineType: "",
        lineIndicator: "",
      },
      tableData: [],
      workshopList: [],
      workshopId: null, // 存储选中的车间ID
      processList: [],
      categoryList: [],
      category: null,
      deviceList: [],
      clampList: [],
      toolList: [],
      personCredentialList: [],
      organizationId: null,
      organizationName: null,
      processFlg: true,
      deviceFlg: true,
      clampFlg: true,
      personnelFlg: true,
      loading: null, // 用于存储loading实例
      lineTypeName: null,//产线类型名称
    };
  },
  created() {
    this.getById();
    //获取当前工厂信息
    this.getFactoryInfo();
    //获取车间集合
    //this.getWorkshopListData()
    //获取所有人员数据
    this.getPersonCredentialListData();
    // 获取产线类型数据
    this.getCategoryData();
    // 获取工序名称数据
    this.getProcessListData();
  },
  mounted() {
    // 不再需要默认行，数据从接口返回
  },
  methods: {
    /**获取工厂信息*/
    getById() {
      getAllObj(this.lineId).then((response) => {
        if (response.data.code === 0) {
          const resData = response.data.data;
          // 回显表单数据
          this.form.lineName = resData.realityLineName;
          this.form.productCategory = resData.productCategory;
          this.form.lineType = resData.lineType;
          this.form.lineIndicator = resData.lineIndicator;
          this.tableData = resData.detailsList;
          getLineType().then((response) => {
            response.data.data.some(item => {
              if (item.value == resData.lineType) {
                this.lineTypeName = item.label;
                return true;
              }
            })
          });
          /*this.tableData = resData.detailsList.map((item) => {
            return {
              ...item,
              workPositionDataList: item.workPositionDataList.map((ii) => {
                return {
                  ...ii,
                  personGrades: ii.personGrades
                    ? ii.personGrades.split(",")
                    : [],
                };
              }),
            };
          });*/
        }
      });
    },
    /**获取工厂信息*/
    getFactoryInfo() {
      const factoryId = 1;
      getObj(factoryId).then((response) => {
        this.organizationId = response.data.data.menuId; //组织ID
        this.organizationName = response.data.data.organizationName; //组织名称
        //获取工厂设备集合
        this.getFactoryDeviceList();
      });
    },
    /**获取工厂设备集合*/
    getFactoryDeviceList() {
      var obj = {
        position: this.organizationName, //设置组织查询条件
      };
      getDevice(obj).then((response) => {
        this.deviceList = response.data.data; //设备集合
        for (var i = 0; i < this.deviceList.length; i++) {
          if (this.deviceList[i].deviceClass === "20") {
            //组织下工具夹具筛选
            this.clampList.push(this.deviceList[i]); //夹具集合
            this.toolList.push(this.deviceList[i]); //工具集合
          }
        }
        this.deviceFlg = false;
        this.clampFlg = false;
      });
    },
    /**获取车间集合*/
    getWorkshopListData() {
      getWorkshopList().then((response) => {
        this.workshopList = response.data.data;
      });
    },
    // 获取所有人员数据
    getPersonCredentialListData() {
      getPersonCredentialList().then((response) => {
        this.personCredentialList = response.data.data;
        this.personnelFlg = false;
      });
    },
    // 获取产线类型数据
    async getCategoryData() {
      getCategory().then((response) => {
        this.categoryList = response.data.data;
      });
    },
    // 获取工序名称数据
    async getProcessListData() {
      getPfocProcessList().then((response) => {
        this.processList = response.data.data;
        this.processFlg = false;
      });
    },
    getWorkshopName(workshopId) {
      const workshop = this.workshopList.find((item) => item.id === workshopId);
      return workshop ? workshop.workshopName : "";
    },
    getDeviceName(deviceSn) {
      const device = this.deviceList.find((item) => item.deviceSn === deviceSn);
      return device ? `${device.deviceName} (${device.deviceSn})` : deviceSn;
    },
    getClampName(clampSn) {
      const clamp = this.clampList.find((item) => item.deviceSn === clampSn);
      return clamp ? `${clamp.deviceName} (${clamp.deviceSn})` : clampSn;
    },
  },
};
</script>

<style scoped></style>
